<template>
    <div>
        <div class="audio-play-container" v-if="playStyle == 1">
            <div class="audio-play">
                <div class="poster" v-if="poster != ''">
                    <image mode="aspectFill" :class="{'image-ani': isPlay}" :src="poster" alt="" />
                </div>
                <div class="info">
                    <div class="name" v-if="info.name != ''">{{ info.name }}</div>
                    <div class="author" v-if="info.author != ''">{{ info.author }}</div>
                </div>
            </div>
            <div>
                <slider class="progress" backgroundColor="#999" activeColor="#222" block-size="16" v-model="currentTime" :max="durationTime" @change="changeAudioTime"></slider>
                <div class="info_progress">
                    <div>{{ getFormattedTime(currentTime) }}</div>
                    <div class="play" @click="play">
                        <image mode="aspectFill" v-if="isPlay" src="/static/vote/pause.png" alt="" />
                        <image mode="aspectFill" v-else src="/static/vote/play.png" alt=""/>
                    </div>
                    <div>{{ getFormattedTime(durationTime) }}</div>
                </div>
            </div>

        </div>
        <div class="audio-play-card" v-if="playStyle == 2">
            <div class="poster" v-if="poster != ''">
                    <image mode="aspectFill" :class="{'image-ani': isPlay}" :src="poster" alt="" />
            </div>
            <div class="info">
                <div class="name" v-if="info.name != ''">{{ info.name }}</div>
                <slider class="progress" backgroundColor="#999" activeColor="#222" block-size="12" v-model="currentTime" :max="durationTime" @change="changeAudioTime"></slider>
                <div class="progress-info">
                    <div>{{ getFormattedTime(currentTime) }}</div>
                    <div>{{ getFormattedTime(durationTime) }}</div>
                </div>
            </div>
            <div class="play" @click="play">
                <image mode="aspectFill" v-if="isPlay" src="/static/vote/pause.png" alt="" />
                <image mode="aspectFill" v-else src="/static/vote/play.png" alt=""/>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: 'audioPlay',
    props: {
        playStyle:{
            default:2
        },
        src: {
            default: ''
        },
        poster: {
            default: ''
        },
        info: {
            default: () => { return { name: '', author: '' } }
        }
    },
    data() {
        return {
            audioContext: null,
            currentTime: 0,
            currentTimeStr:'',
            durationTime: 0,
            durationTimeStr:'',
            isPlay: false
        }
    },
    methods: {
        play(){
            //停止全局音乐的播放
            this.$store.commit('SET_MUSIC_OPEN',false)
            if(!this.isPlay){
                this.audioContext.play()
            }else{
                this.audioContext.pause()
            }
            this.isPlay = !this.isPlay
        },
        initAudio() {
            if (this.audioContext != null) { return }
            this.audioContext = uni.createInnerAudioContext()
            this.audioContext.src = this.src
            let _t = this
            this.audioContext.onTimeUpdate(() => {
                _t.onTimeUpdate()
            })
            this.audioContext.onEnded(()=>{
                _t.isPlay = false
            })
            this.play()
        },
        onTimeUpdate() {
            this.currentTime = this.audioContext.currentTime
            this.durationTime = this.audioContext.duration
        },
        changeAudioTime(e) {
            this.audioContext.pause()
            this.audioContext.seek(e.detail.value)
            this.audioContext.play()
            this.isPlay = true
        },
        getFormattedTime(time) {
            const ms = time * 1000;
            const date = new Date(ms);
            const hour = date.getUTCHours();
            const minute = date.getMinutes();
            const second = date.getSeconds();

            const formatTime = hour > 0
            ? `${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}:${second.toString().padStart(2, '0')}`
            : `${minute.toString().padStart(2, '0')}:${second.toString().padStart(2, '0')}`;

            return formatTime;
        }
    },
    mounted() {
        this.initAudio()
    }
}
</script>
<style lang="scss" scoped>
.audio-play-card{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: 120rpx;
    border: 1rpx solid #ddd;
    border-radius: 0 60rpx 60rpx 0;
    box-sizing: border-box;
    padding-right: 20rpx;
    gap: 20rpx;
    .poster{
        flex: 0 1 120rpx;
        width: 120rpx;
        height: 120rpx;
        overflow: hidden;
        image{
            width: 100%;
            height: 100%;
        }
    }
    .info{
        flex:1 0;
        margin-right: 20rpx;
        .name{
            width: 100%;
            font-size: 28rpx;
            font-weight: 500;
            height: 30rpx;
            line-height: 30rpx;
            -webkit-box-orient: vertical;
            display: -webkit-box;
            line-clamp: 1;
            -webkit-line-clamp: 1;
            /*只显示6行*/
            overflow: hidden;
            /*溢出隐藏*/
            text-overflow: ellipsis;
            font-family: PingFang SC;
            color: #222;
        }
        .progress{
            margin: 10rpx 0;
        }
        .progress-info{
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 24rpx;
            line-height: 24rpx;
            height: 24rpx;
            font-family: PingFang SC;
            color: #222;
            margin-bottom: 2rpx;
        }
    }
    .play{
        flex: 0 1 50rpx;
            width: 50rpx;
            height: 50rpx;
            border-radius: 50%;
            overflow: hidden;
            image{
                width: 100%;
                height: 100%;
            }
        }
}
.audio-play-container {
    background: #fefefe;
    width: 100%;
    padding: 24rpx 20rpx 36rpx;
    border: 1rpx solid #d9d9d9;
    border-radius: 14rpx;
    box-sizing: border-box;
    .progress{
        height: 30rpx;
        line-height: 30rpx;
        margin: 30rpx 6rpx 50rpx;
    }
    .info_progress {
        height: 40rpx;
        margin-top: 12rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 28rpx;
        line-height: 30rpx;
        font-family: PingFang SC;
        color: #222;
        box-sizing: border-box;
        .play{
            width: 50rpx;
            height: 50rpx;
            border-radius: 50%;
            overflow: hidden;
            image{
                width: 100%;
                height: 100%;
            }
        }
    }
}

.audio-play {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    border: 1rpx solid #fdfdfd;
    box-sizing: border-box;
    border-radius: 12rpx;
    gap: 20rpx;

    .poster {
        flex: 0 1 120rpx;
        width: 120rpx;
        height: 120rpx;
        border-radius: 50%;
        overflow: hidden;
        .image-ani{
            animation: rotate 10s linear infinite;
        }
        image {
            width: 100%;
            height: 100%;
        }
    }

    .info {
        flex: 1 0;
        .name {
            font-size: 32rpx;
            font-weight: 500;
            height: 40rpx;
            line-height: 40rpx;
            -webkit-box-orient: vertical;
            display: -webkit-box;
            line-clamp: 1;
            -webkit-line-clamp: 1;
            /*只显示6行*/
            overflow: hidden;
            /*溢出隐藏*/
            text-overflow: ellipsis;
            font-family: PingFang SC;
            color: #222;
        }

        .author {
            text-align: left;
            margin-top: 14rpx;
            font-size: 28rpx;
            line-height: 30rpx;
            -webkit-box-orient: vertical;
            display: -webkit-box;
            line-clamp: 1;
            -webkit-line-clamp: 1;
            /*只显示6行*/
            overflow: hidden;
            /*溢出隐藏*/
            text-overflow: ellipsis;
            font-family: PingFang SC;
            color: #888;
        }
    }

}
  
  @keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }
</style>